<template>
  		<!-- 筛选栏 -->
		<div class="shaixuan-bg">
			<div class="shaixuan">
			        	<!-- 左 -->
			        	<div class="tuijian">
			        		<ul>
			        			<li class="tuijian-selected"><a href="#/product">推荐</a></li>
			        			<li><a href="#">新品</a></li>
			        			<li><a href="#">价格 ↑</a></li>
			        			<li><a href="#">评论最多</a></li>
			        		</ul>
			        	</div>
			        	<!-- 右 -->
			        	<div class="gouxuan">
			        		<ul>
			        			<li class="last-one"><span></span><a href="#">仅显示有货商品</a></li>
			        			<li><span></span><a href="#">仅显示特价商品</a></li>
			        			<li><span></span><a href="#/productck4">查看评价</a></li>
			        		</ul>
			        	</div>
			        </div>
		</div>
</template>




<script>
export default{
  data () {
    return {}
  }
}
</script>




<style scoped>
/*筛选栏--左*/
.shaixuan-bg{
	width: 1200px;
	margin: 0 auto;
}
.shaixuan{
	margin:20px 0;
}
.shaixuan .tuijian ul li a{
	line-height:20px;
	color:#424242;
	font-size: 14px;
}
.shaixuan div.tuijian ul li.tuijian-selected a{
	color:#ff6700;
}
.shaixuan>div{
	position:relative;
}
.shaixuan div.tuijian ul li{
	float:left;
	padding:0 30px;
	border-left:1px solid #e0e0e0;
}
.shaixuan div.tuijian ul li.tuijian-selected{
	color:#ff6700;
	border-left:0;
	padding-left:0;
}
/*取消悬浮影响*/
.shaixuan::after{
	content:"";
	display:block;
	clear:both;
}



/*筛选栏--右*/
.shaixuan div.gouxuan ul li{
	float:right;
	padding:0 20px;
}
.shaixuan div.gouxuan ul li.last-one{
	padding-right:0;
}
.shaixuan div.gouxuan ul li a{
	line-height:20px;
	color:#424242;
	font-size: 14px;
}
.shaixuan div.gouxuan ul li span{
	display: block;
	border: 1px solid #e0e0e0;
	width: 13px;
	height: 13px;
	float:left;
	position:relative;
	top: 2px;
	background-color: #fff;
	margin-right: 5px;
}
.shaixuan div ul li a:hover{
	color:#ff6700;
}
</style>